<!DOCTYPE html>
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>yukari world</title>
    <#include "/lib/base_source.ftl">
      <style type="text/css">
      </style>
  </head> 
  <body>
    <div class='whole-container'>
      <#include "/lib/header.ftl">
        <div>
          <ul class="breadcrumb">
            <li>弹幕管理</li><span class="divider">/</span>
            <li>弹幕查询</li>
          </ul>
        </div>
        <div class="container-fluid">
          <div class="row-fluid">
            <div class="container span12">
              <#include "/lib/alert.ftl">
                 <div class='main-content'>
                    <div class="well form-horizontal">
                        <div class='main-action'>
                    		<div class="control-group">
                                <label class="control-label">名字：</label>
                                <div class="controls">
                                    <input type="text" id="name" name="name" value="${key!}" />
                                </div>
                            </div>
                    		<div class="control-group">
                                <label class="control-label">查询类型：</label>
                                <div class="controls">
                                    <input type="radio" name="fuzzy" value="false" checked/>精确查询&nbsp;&nbsp;
									<#if manageAuthLv <= 5>
									<input type="radio" name="fuzzy" value="true"/>模糊查询
									</#if>
                                </div>
                            </div>
                    		<div class="control-group">
                                <label class="control-label"></label>
                                <div class="controls">
                                    <a href="javascript:findChatmsg()" class="btn btn-info btn-sm">查询</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="table-content">
                    <#-- table -->
                        <table class="table-striped table-condensed table-hover" id="itemTable" style="width: 100%;max-width: 100%;margin-bottom: 20px;font-size:12px;word-break:break-all;word-wrap:break-word;">
                        </table>
                        <div class="pagination" id="itemPage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  <script>
    $(document).ready(function() {
    	$('.time').datetimepicker({
	    	format: 'yyyy-mm-dd',
	    	autoclose:true,
	    	startDate:'2017-02-09',
	    	minView:2,
	    	startView:2
	    });
	    if ($("#name").val() != ""){
	    	findChatmsg();
	    }
	});
	
	function findChatmsg(){
		var name = $("#name").val();
		var fuzzy = $("input[name=fuzzy]:checked").val();
		findChatmsgAjax(name,fuzzy);
	}
	
	function findChatmsgAjax(name,fuzzy){
		$.ajax({
			url : "${rc.contextPath}/admin/chatmsg/find",
	    	dataType : "json",
	    	data :  {"name":name,"fuzzy":fuzzy},
	    	type:'post',
	    	success:function(json){
	    		var data = json.data;
				$("#itemTable").html("");
	    		for (var i=0;i<data.length;i++){
	    			showChatmsg(data[i]);
	    		}
	    	}
		});
	}
	
var pattern = "\\[emot:(dy\\d{3})\\]";
var newStr = '<img src="https://shark.douyucdn.cn/app/douyu/res/page/room-normal/face/$1.png?v=20170626">';
var regExp = new RegExp(pattern,'gm');
function txtReplace(txt){
	return txt.replace(regExp,newStr);
}
	function showChatmsg(data){
		var tr = $('<tr></tr>')
		var td1 = $('<td style="width:130px">'+formatDate(data.time)+'</td>');
		var td2 = $('<td style="width:150px">'+data.name+'</td>');
		var td3 = $('<td style="">'+chatmsgReplace(data.txt)+'</td>');
		tr.append(td1).append(td2).append(td3);
		$("#itemTable").append(tr);
	}
	
	function  formatDate(now)   {      
		var now= new Date(now);     
		var year=now.getFullYear();     
		var month=now.getMonth()+1;     
		var date=now.getDate();     
		var hour=now.getHours();      
		var minute=now.getMinutes();     
		var second=now.getSeconds();      
		return  year+"-"+buling(month)+"-"+buling(date)+" "+buling(hour)+":"+buling(minute)+":"+buling(second); 
	}
	function buling(a){
		if (a < 10){
			return "0"+a;
		} else {
			return a;
		}
	}
	
		
   </script>
</body>
</html>